<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../common/jspcommon.jsp"%>

<script type="text/javascript">
$(function(){
	
	$("#pager").pager({ pagenumber: ${friendModel.currentPage}, 
		pagecount: ${friendModel.totalPage},
		buttonClickCallback: function(page){
			$("#content_detail").load("taFriend.htm?family=${family}&page="+page);
		} 
	});
	
	//访问脚印
	$("#newNews2").click(function(){
		$("#content_detail").load("taFriendVisitor.htm?family=${family}");
	});
	
});


function changeGroup(group,page){
	$("#content_detail").load("taFriend.htm?family=${family}&page="+page+"&group="+group);
}

</script>

<div class="h_main2">
	<div class="h_data">
		<h2>
			TA家的邻居
		</h2>
		<div class="h_newNews">
			<ul>
				<li id="newNews1" class="h_newNewsHover">
					<a>TA家的邻居</a>
				</li>
				<li id="newNews2">
					<a>TA家的访问脚印</a>
				</li>
				<div class="clear"></div>
			</ul>
			<div class="clear"></div>
		</div>
		<div class="h_newNews_box">
			<div class="h_newNews_text" id="con_newNews_1"
				style="display: block;">
				<p class="fr pb10 pr15 pt10">
					<select id="group_select" name="group"
						onchange="changeGroup(this.value,${friendModel.currentPage});">
						<option value="">
							分组设置
						</option>
						<c:forEach items="${groupList}" var="friendGroup">
							<option value="${friendGroup.identifier}"
								<c:if test="${group==friendGroup.identifier}">
									SELECTED
								</c:if>>
								<c:out value="${friendGroup.name}" />
							</option>
						</c:forEach>

					</select>
				</p>
				<div class="clear"></div>
				<div class="h_myfriends_list" style="position: relative;">
				<c:if test="${(friendModel.list == null || fn:length(friendModel.list) < 1) && group==null}">
					<script>
						$("#group_select").remove();
					</script>
					<div class="success">TA家现在还没有和其他家庭成为邻居哦!</div>
				</c:if>
				<c:if test="${(friendModel.list == null || fn:length(friendModel.list) < 1) && group!=null}">
					<div class="success">TA家现在的邻居还没有<span id="groupNotice"></span><script>$("#groupNotice").html($.trim($("#group_select").find("option:selected").text()));</script>分类的哦!</div>
				</c:if>
					<ul>
						<c:forEach items="${friendModel.list}" var="friendFamily"
							varStatus="status">
							<li>
								<img src="${friendFamily.avatar}" alt="头像" width="58"
									height="58" />
								<em><a href="javascript:void(0);"
									onclick="seeOtherFamily('${friendFamily.doorplate}')"><c:out
											value="${friendFamily.nickname}" />
								</a><strong class="ml15">门牌：<c:out
											value="${friendFamily.doorplate}" /> </strong> </em>
								<div class="myfriends_pm">
									<c:forEach items="${friendFamily.fatherList}" var="father">
										<p>
											<img src="${father.avatar}" alt="头像" width="34" height="34" />
											爸爸：
											<c:out value="${father.friendName}" />
										</p>
									</c:forEach>
									<c:forEach items="${friendFamily.motherList}" var="mother">
										<p>
											<img src="${mother.avatar}" alt="头像" width="34" height="34" />
											妈妈：
											<c:out value="${mother.friendName}" />
										</p>
									</c:forEach>

								</div>
								<div class="clear"></div>
							</li>
						</c:forEach>


						<div class="clear"></div>
					</ul>
					<div class="clear"></div>

					<div class="clear"></div>
				</div>
				<div class="clear"></div>
				<div id="pager" class="h_page"></div>
			</div>
			<div class="h_newNews_text" id="con_newNews_2">
				fdsfsdf
			</div>
			<div class="h_newNews_text" id="con_newNews_3">
				fffff
			</div>
		</div>
	</div>
</div>
